<template>
<!--   <div> -->
<!-- <div style="margin: 10px;overflow: hidden;"> -->
<!--       <masker v&#45;for="a in cards" style="border&#45;radius: 2px;" color="F9C90C" :opacity="0.8"> -->
<!--         <div class="m&#45;img" style="background&#45;image:url(https://cdn.xiaotaojiang.com/uploads/56/4b3601364b86fdfd234ef11d8712ad/_.jpg)"></div> -->
<!--         <div slot="content" class="m&#45;title"> -->
<!--           VUX -->
<!--           <br/> -->
<!-- <p style="font&#45;size:14px;line&#45;height:1.2;">{{a.quantity}}50人已够 </p> -->
<!--           <span class="m&#45;time">2016&#45;03&#45;18</span> -->
<!--         </div> -->
<!--       </masker> -->
<!--     </div> -->
<!--     <divider>已购到卡</divider> -->
<!--     <cell title=" -->
<!--       提升额度审核失败，请重新提交"  is&#45;link></cell> -->
<!--     <card  link="/" > -->
<!--       <img slot="header" src="http://placeholder.qiniudn.com/640x300" style="width:100%;display:block;"> -->
<!--       <div slot="content" class="card&#45;padding"> -->
<!--         <!&#45;&#45; <p style="font&#38;#45;size:14px;line&#38;#45;height:1.2;">{{a.quantity}}50人已够 </p> &#45;&#45;> -->
<!--         <p style="font&#45;size:14px;line&#45;height:1.2;">库存100张</p> -->
<!--       </div> -->
<!--     </card> -->
<!--  -->
<!--   </div> -->
<div>

  <div>
    <!-- {{cards[0]}} -->
    <div v-for="s in cards" style="margin: 10px;overflow: hidden;">
      <masker  style="border-radius: 2px;" color="f9c90c" :opacity="0.8">
      <div class="m-img" style="background-image:url(https://cdn.xiaotaojiang.com/uploads/56/4b3601364b86fdfd234ef11d8712ad/_.jpg)"></div>
      <div slot="content" class="m-title"  @click.navtive="gocard(s.productNo)" >
        <cell title="目前您最高只能发500元的卡，提升发卡额度"  @click.navtive="gocard(s.productNo)" is-link></cell>
        <p @click.navtive="gocard(s.productNo)"  style="font-size:14px;line-height:1.2;">{{s.quantity}}人已够 </p>
        <br/>
        <span @click.navtive="gocard(s.productNo)" class="m-time">{{s.name}}</span>
        <span class="m-time">{{s.expireDate}}</span>
        <span class="m-time">已售{{s.sellQuantity}}</span>
        <span class="m-time">卡号{{s.productNo}}</span>
        <span class="m-time">售价{{s.price}}</span>

      </div>
      </masker>
    </div></div>
  </div>
</template>

<script>
import { Divider, Card ,Cell, Masker} from 'vux'
import * as store from './mystores.js'
console.info(store.a.local.getcards,3333333333333333);
export default {
  data(){
    return {
      postData:{
         "page":{"pageNo":"1","pageSize":"10"}
      },
      cards:[]
    }
  },
  components: {
    Card,
    Divider,
    Cell,
    Masker
  },
  beforeCreate(){

let xx = localStorage.getItem('sessionId')
    var postDatas ={  "page":{"pageNo":"1","pageSize":"10"}}
              console.info(this.postData, "postdata!!!");
       this.$http.post(store.a.local.getcards,postDatas,{headers: {
        merchantSessionId: xx    }}).then(res =>{
          console.info(res, "getCards");
          this.cards = res.body.returnValue.result
          console.info(this.postData, "postdata!!!");
       })
  },
  methods: {
       gocard (user){
this.$router.push('/updateonecard/'+user)
// let xx = localStorage.getItem('sessionId')
//          console.error(store.a.local.getcard + user,"mogan");
//          this.$http.get(store.a.local.getcard +user,{"valueInfo":{"cardNo":user}},
//            {headers: {merchantSessionId:xx}}).then(res => {
//            console.info(res,"go one card detail");
//            })
       }
  }

}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}

.m-img {
  padding-bottom: 33%;
  display: block;
  position: relative;
  max-width: 100%;
  background-size: cover;
  background-position: center center;
  cursor: pointer;
  border-radius: 2px;
}

.m-title {
  color: #fff;
  text-align: center;
  text-shadow: 0 0 2px rgba(0, 0, 0, .5);
  font-weight: 500;
  font-size: 16px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

.m-time {
  font-size: 12px;
  padding-top: 4px;
  border-top: 1px solid #f0f0f0;
  display: inline-block;
  margin-top: 5px;
}

</style>
